<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单详情页面</title>
    <!--bootstrap-->
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <script src="../js/CacheUtil.js"></script>
    <script src="../js/HttpUtil.js"></script>
    <script src="../js/OrdersUtils.js"></script>
    <script src="../js/UserCacheUtil.js"></script>
</head>
<body>
<!--导入页面公共头部-->
<div class="Top_header"></div>

<div class="panel panel-default" style="margin: 0 auto;width: 95%;" id="orderDetailsBox">
    <div class="panel-heading">
        <h3 class="panel-title"><span class="glyphicon glyphicon-equalizer"></span>&nbsp;&nbsp;订单详情</h3>
    </div>
    <div class="panel-body" >
        <table cellpadding="0" cellspacing="0" align="center" width="100%"
               class="table table-striped table-bordered table-hover" >

            <tr>
                <td>订单编号:</td>
                <td>{order.oId}</td>
                <td>订单生成时间:</td>
                <td>{order.oCreateTime}</td>
            </tr>
            <tr>
                <td>收件人:</td>
                <td>{order.address.aname}</td>
                <td>联系电话:</td>
                <td>{order.address.aphone}</td>
            </tr>
            <tr>
                <td>送货地址:</td>
                <td>{order.address.aDetail}</td>
                <td>总价:</td>
                <td>{order.oCount}</td>
            </tr>
            <tr>
                <td align="center">商品列表:</td>
                <td colspan="3">
                    <table id="showInfo" align="center" cellpadding="0" cellspacing="0" width="100%"
                           class="table table-striped table-bordered table-hover">
                        <tr align="center" >
                            <th>序号</th>
                            <th>商品封面</th>
                            <th>商品名称</th>
                            <th>商品评分</th>
                            <th>商品日期</th>
                            <th>商品单价</th>
                            <th>购买数量</th>
                            <th>小计</th>
                        </tr>

                    </table>
                </td>
            </tr>
            <tr>
                <td align="right" colspan="4" style="margin-right: 40px;">
                    <a href="order.html" class="btn btn-danger btn-sm">返回订单列表</a>
                    &nbsp;&nbsp;
                    <!--   js 动态判断订单状态    -->
                    ForPay
                </td>
            </tr>
        </table>
    </div>
</div>


<script>
    //获取上一个页面存储的后端数据
    let o = getOrder();
    let order = JSON.parse(o);
    console.log('从上一个页面获取的后端数据');
    console.log(order);
    $(drawingOrderDetails(order));  //替换字段
    $(".Top_header").load("/shop-app/include/header.html");
    $(orderDetailsInfo(order)); //渲染
</script>
</body>
</html>